<template>
  <div>
    <!-- <el-drawer
      lock-scroll
      :modal="false"
      :modal-append-to-body="true"
      append-to-body
      :class="isCollapse?'formdata-drawer2':'formdata-drawer'"
      :title="title"
      :visible.sync="open"
      size="100%"
    > -->
    <div class="app-container">
      <div class="mainbox">
        <dt-table
          ref="table"
          v-loading="loading"
          :table-opts="tableOpts"
          :is-show-column="true"
          :is-column-search="false"
          :pagination-data="{
            total:total,
            queryParams:queryParams
          }"
          @pagination="getList"
          @searchChange="handleQuery"
          @searchReset="handleReset"
          @selection-change="handleSelectionChange"
        />
      </div>
    </div>
    <!-- </el-drawer> -->
    <formDataDialog ref="formDataDialogRef" :form-json="json1" :form-id="queryParams.formId" @getList="getList" />
  </div>
</template>
<script>
import { getFormJson, getList, formDataDeletes } from '@/framework/api/unifiedReporting/unifiedReporting'
import { getTableOptions } from '@/framework/utils/getTableOptions'
import { mapGetters } from 'vuex'
import formDataDialog from './formDataDialog.vue'
export default {
  name: 'FormData',
  dicts: ['appSource'],
  components: {
    formDataDialog
  },
  data() {
    return {
      api: {},
      apiprops: {},
      tableOpts: {},
      json1: {},
      json2: {
        configSearch: ['resourceName', 'data', 'datarange'],
        configColumn: [
          'resourceName', 'resourceUrl', 'httpMethod', 'image', 'datarange', 'timerange', 'textarea', 'jilian', 'radio', 'checkbox', 'number',
          'rate', 'color', 'password', 'time', 'data'
        ],
        configButton: ['新增', '编辑', '批量删除'],
        configPagination: '1' // 1 分页。0不分页
      },
      open: false,
      title: '',
      total: 0,
      loading: false,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        formId: '12'
        // formDataId: '23'
      },
      multipleSelection: [],
      interfaceList: [
        {
          url: '/add',
          methods: 'post',
          type: 'add'
        },
        {
          url: '/edit',
          methods: 'post',
          type: 'edit'
        },
        {
          url: '/deletes',
          methods: 'post',
          type: 'delete'
        }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    isCollapse() {
      return !this.sidebar.opened
    },
    size() {
      return this.$store.getters.device === 'mobile' ? '375px' : '960px'
    }
  },
  mounted() {
    this.openDrawer()
  },
  methods: {
    // 多选框选中数据
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleAdd() {
      this.$refs.formDataDialogRef.handleOpen('add', {}, this.interfaceList.find(item => item.type === 'add'))
      // this.api = 'api'
      // this.apiprops = {}
    },
    handleEdit(row) {
      this.$refs.formDataDialogRef.handleOpen('edit', row, this.interfaceList.find(item => item.type === 'edit'))
    },
    handleDetail(row) {
      this.$refs.formDataDialogRef.handleOpen('detail', row, this.interfaceList.find(item => item.type === 'detail'))
    },
    // 删除
    handleDelete(row) {
      const that = this
      if (!that.multipleSelection || that.multipleSelection.length === 0) {
        this.$dtModal.msgError('请先选择要批量处理的数据')
        return
      }
      const ids = that.multipleSelection.map(res => {
        return res.id
      })
      that.$dtModal.confirm('是否确认解除?').then(function() {
        const params = {
          formId: that.$route.query.formId,
          formDataIds: ids.join(',') // 接口id集合[]
        }
        formDataDeletes(params).then(() => {
          that.$dtModal.msgSuccess('批量删除成功')
          that.$refs.table.clearSelection()
          that.getList()
        })
      })
    },
    /** 重置按钮操作 */
    handleReset() {
      this.queryParams = {
        pageNo: 1,
        pageSize: 10,
        formId: this.$route.query.formId
      }
      this.handleQuery()
    },
    // 搜索
    handleQuery(formModel) {
      Object.keys(formModel || {}).forEach((key) => {
        if (Array.isArray(formModel[key])) {
          formModel[key] = formModel[key].join(',')
        }
      })
      this.queryParams.formId = this.$route.query.formId
      this.queryParams = Object.assign(this.queryParams, { 'searchParams': formModel })
      this.queryParams.pageNo = 1
      this.$refs['table'].clearSelection()
      this.getList()
    },
    openDrawer() {
      // const row = JSON.parse(this.$route.query.row)
      // this.open = true
      this.title = '"' + this.$route.query.formName + '"表单数据'
      this.queryParams.formId = this.$route.query.formId
      // 从接口获取格式数据
      getFormJson({ formId: this.queryParams.formId }).then(res => {
        this.json1 = JSON.parse(res.data.formDesignInfo.formContent) // 表单结构json
        this.json2 = res.data.formDesignInfo.tabulationInfo // 配置项json
        this.configPagination = res.data.formDesignInfo.tabulationInfo.configPagination
        // 先获取tableopts
        this.tableOpts = getTableOptions(this.json1, this.json2, this.handleAdd, this.handleEdit, this.handleDelete, this.handleDetail)
        // 获取增删改查接口信息
        this.interfaceList = res.data.interfaceList
        this.getList()
      })
      // const res = {}
    },
    // 获取表格列表数据
    getList() {
      getList({ ...this.queryParams, ...{ configPagination: this.configPagination }}).then((res) => {
        if (this.tableOpts.configPagination === '1') {
          this.tableOpts.tableData = res.data.rows
          this.total = res.data.totalRows
        } else {
          this.tableOpts.tableData = res.data.rows
        }
        this.loading = false
      })
    },
    clearSelection() {
      this.$refs['table'].clearSelection()
    }

  }
}
</script>
<style lang="scss" scoped>
</style>
